博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原来用纯css做瀑布流是这么easy
阅读量:6655 次
发布时间:2019-06-25

本文共 444 字,大约阅读时间需要 1 分钟。

hot3.png

效果

对比

这在没有css3是比较费力的,计算图片的高度,分别做汇总,一会儿往左丢一个,一会儿往右丢一个,使得左右高度相近

现在只有一个属性搞定column-count: n;其中n代表所需要的列数,其他就跟正常的一样写就可以了

核心CSS代码

/*画廊整体*/.gallery {	/*定义列数*/	column-count: 2;	/*列间距*/	column-gap: 4px;}/*图片本身*/.gallery-item image {	width: 100%;}

Dom结构

其中widthFix是一个了不起的属性,之前我做灵动云商城时,微信小程序还没有这个属性,也模拟实现了,是通过getImageInfo变相实现的。

但自从用上了widthFix后,做高度自适应,就是飞一般的感觉了。

一点小tip,以记。

转载于:https://my.oschina.net/huangxiujie/blog/1509910

你可能感兴趣的文章
DataSource的可配参数有哪些,有哪些DataSource可以用
查看>>
免费的后台管理界面框架
查看>>
本地文件共享服务(nfs samba ftp)
查看>>
scp通过代理proxy传输文件
查看>>
excel 打开时报“发现不可读的内容...”
查看>>
pandas-利用python进行数据分析
查看>>
数据段、代码段、堆栈段、BSS段的区别
查看>>
Apache Bench
查看>>
WebService之Axis2快速入门(5): 管理会话(Session)
查看>>
以太坊RPC接口使用
查看>>
普通html标签<form>和struts2<s:form>的区别
查看>>
安装NTFS For Mac时显示文件已损坏怎么办
查看>>
-webkit-line-clamp实现多行文字溢出隐藏显示省略号
查看>>
Sublime Text 3 - 设置自动换行
查看>>
nil / Nil / NULL / NSNull in Objective-C
查看>>
iphone系统架构以及各层提供的主要服务
查看>>
配置sunspot tomcat结合sunspot_rails
查看>>
数据库分库分表中间件 Sharding-JDBC 源码分析 —— SQL 执行
查看>>
飞信系统4月29日升级后飞信机器人无法使用的解决办法
查看>>
Linux Epoll介绍和程序实例
查看>>